<template>
  <h1>useModal</h1>

  <div>
    <f-button @click="openAlert({ content: '基本提示框', title: '标题1' })">基本提示框</f-button>
    <f-button @click="openAlert({ content: 'info 提示框', status: 'info' })">info</f-button>
    <f-button @click="openAlert({ content: 'warning 提示框', status: 'warning' })"
      >warning</f-button
    >
    <f-button @click="openAlert({ content: 'question 提示框', status: 'question' })"
      >question</f-button
    >
    <f-button @click="openAlert({ content: 'success 提示框', status: 'success' })"
      >success</f-button
    >
    <f-button
      @click="openAlert({ content: 'error 提示框', title: 'app.body.msg.error', status: 'error' })"
      >error</f-button
    >
    <f-button @click="openAlert({ content: 'loading 提示框', status: 'loading' })"
      >loading</f-button
    >
    <f-button
      @click="
        openAlert({
          content: 'iconStatus 自定义图标',
          status: 'error',
          iconStatus: 'f-icon-question-circle-fill'
        })
      "
      >自定义图标</f-button
    >
    <f-button @click="openAlert({ content: '禁止按住头部进行拖动', draggable: false })"
      >禁止拖动</f-button
    >
    <f-button @click="openAlert({ content: '不显示取消按钮', showCancelButton: false })"
      >不显示取消按钮</f-button
    >
  </div>
</template>

<script setup>
// import { ref, h, watch } from 'vue';
import { useModal } from '../../packages/index';

const openAlert = async (options) => {
  const res = await useModal().confirm({
    ...options,
    onConfirm: (event) => {
      console.log('确定', event);
    },
    onCancel: (event) => {
      console.log('取消', event);
    }
  });
  console.log(res);
  // useModal({
  //   type: 'confirm',
  //   ...options,
  //   onCancel: (event) => {
  //     console.log('取消', event)
  //   }
  // })
};
</script>

<style lang="scss"></style>
